<template>
  <!-- 自定义导航栏容器 -->
  <view
    class="custom-navbar"
    :style="{
      height: navbarHeightStyle,
      backgroundColor: immersive ? 'transparent' : backgroundColor,
      borderBottom:
        this.border && !this.immersive ? '1px solid #f5f5f5' : 'none',
    }"
  >
    <!-- 状态栏占位 -->
    <view
      class="navbar-status-bar"
      :style="{ height: statusBarHeightStyle }"
    ></view>

    <!-- 导航栏主体 -->
    <view
      class="navbar-main"
      :style="{
        height: titleBarHeightStyle,
        paddingRight: menuButtonRightStyle,
      }"
    >
      <!-- 左侧内容 -->
      <view class="navbar-left">
        <slot name="left">
          <!-- 默认返回按钮 -->
          <view v-if="showBack" class="navbar-back" @click="handleBack">
            <uni-icons type="left" size="22" :color="color"></uni-icons>
            <view v-if="backText" class="back-text">{{ backText }}</view>
          </view>
        </slot>
      </view>

      <!-- 中间标题 -->
      <view class="navbar-center">
        <slot name="center">
          <text class="navbar-title" :style="{color:color}">{{ title?title:'' }}</text>
        </slot>
      </view>

      <!-- 右侧内容 -->
      <view class="navbar-right">
        <slot name="right"></slot>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "CustomNavbar",
  props: {
    // 导航栏标题
    title: {
      type: String,
      default: "",
    },
    // 是否显示返回按钮
    showBack: {
      type: Boolean,
      default: true,
    },
    // 返回按钮文字
    backText: {
      type: String,
      default: "",
    },
    // 背景颜色
    backgroundColor: {
      type: String,
      default: "#ffffff",
    },
    // 标题颜色
    color: {
      type: String,
      default: "#ffffff",
    },
    // 是否沉浸式（透明背景）
    immersive: {
      type: Boolean,
      default: false,
    },
    // 是否显示底部边框
    border: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      statusBarHeight: 20, // 默认状态栏高度
      titleBarHeight: 44, // 默认标题栏高度
      menuButtonRight: 0, // 胶囊按钮右侧距离
    };
  },
  computed: {
    // 导航栏总高度
    navbarHeight() {
      return this.statusBarHeight + this.titleBarHeight;
    },
    // 导航栏容器样式
    navbarStyle() {
      return {
        height: `${this.navbarHeight}px`,
        backgroundColor: this.immersive ? "transparent" : this.backgroundColor,
        borderBottom:
          this.border && !this.immersive ? "1px solid #f5f5f5" : "none",
      };
    },
    navbarHeightStyle() {
      return `${this.navbarHeight}px`;
    },
    // 状态栏样式
    statusBarHeightStyle() {
      return `${this.statusBarHeight}px`;
    },
    titleBarHeightStyle() {
      return `${this.titleBarHeight}px`;
    },
    menuButtonRightStyle() {
      return `${this.menuButtonRight}px`;
    },
    // 标题栏样式
    titleBarStyle() {
      return {
        height: `${this.titleBarHeight}px`,
        paddingRight: `${this.menuButtonRight}px`,
      };
    },
    // 标题样式
    titleStyle() {
      return {
        color: this.color,
      };
    },
  },
  created() {

    this.initNavbarInfo();
  },
  methods: {
    // 初始化导航栏信息
    initNavbarInfo() {
      const systemInfo = uni.getSystemInfoSync();
      this.statusBarHeight = systemInfo.statusBarHeight || 20;

      // 微信小程序获取菜单按钮位置
      // #ifdef MP-WEIXIN
      const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
      this.titleBarHeight =
        (menuButtonInfo.top - systemInfo.statusBarHeight) * 2 +
        menuButtonInfo.height;
      this.menuButtonRight = systemInfo.windowWidth - menuButtonInfo.right;
      // #endif

      // 其他平台处理
      // #ifndef MP-WEIXIN
      this.titleBarHeight = 44;
      this.menuButtonRight = 0;
      // #endif
    },
    // 返回按钮点击事件
    handleBack() {
      this.$emit("back");
      uni.navigateBack();
    },
  },
};
</script>

<style lang="scss" scoped>
.custom-navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  box-sizing: border-box;
  overflow: hidden;


  .navbar-status-bar {
    width: 100%;
  }

  .navbar-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    box-sizing: border-box;
    padding-left: 12px;

    .navbar-left {
      flex-shrink: 0;

      .navbar-back {
        display: flex;


        .back-text {
          margin-left: 4px;
          font-size: 16px;
        }
      }
    }

    .navbar-center {
      flex: 1;
      display: flex;
      justify-content: center;
      overflow: hidden;

      .navbar-title {
        font-size: 16px;
        font-size: 500;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 60vw;
      }
    }

    .navbar-right {
      flex-shrink: 0;
      margin-right: 12px;
    }
  }
}
</style>
